<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:102:"D:\PHPStudy\PHPTutorial\WWW\HM\pdingzone\addons\hmls_assets\widget\view\assets_catalog_statistics.html";i:1544590057;}*/ ?>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<div id="assetsCatalogStatistics" style="height: 300px;"></div>
<?php 
$catStatJson = json_encode($catStat);
$catTreeJson = json_encode($catTree);
 ?>
<script>
    (function () {
        var catStat = <?php echo $catStatJson; ?>;
        var catTree = <?php echo $catTreeJson; ?>;
        var sumCount = 0;
        var sumMoney = 0;
        for (var i = 0; i < catStat.length; i++) {
            sumCount += catStat[i].count;
            sumMoney += catStat[i].money;
        }

        /**
         * 数据格式转换
         *
         * @param catStat
         * @param catTreeNode
         * @param prefix
         * @returns {{name: *, children: Array}}
         */
        function convert(catStat, catTreeNode, prefix, type) {
            var id = catTreeNode.data.id;
            var data = {
                name: catTreeNode.data.text,
                fullname: prefix + catTreeNode.data.text,
                children: []
            };
            for (var i = 0; i < catStat.length; i++) {
                if (catStat[i].catid == id) {
                    if (catTreeNode.children.length > 0) {
                        data.children.push({
                            name: "其他",
                            fullname: data.name + '-其他',
                            value: type == 'count' ? catStat[i].count : catStat[i].money,
                            data: catStat[i]
                        });
                    } else {
                        data.value = type == 'count' ? catStat[i].count : catStat[i].money;
                        data.data = catStat[i];
                    }
                }
            }
            for (var i = 0; i < catTreeNode.children.length; i++) {
                var dt = convert(catStat, catTreeNode.children[i], data.name + "-", type);
                data.children.push(dt);
            }
            if (data.children.length > 0) {
                var d = {
                    catid: catTreeNode.data.id,
                    count: 0,
                    money: 0
                };
                for (var i = 0; i < data.children.length; i++) {
                    if (!data.children[i].data) {
                        continue;
                    }
                    d.count += data.children[i].data.count;
                    d.money += data.children[i].data.money;
                }
                console.log(data);
                data.data = d;
            }
            return data;
        }

        /**
         * tooltip
         *
         * @param node
         * @returns {string}
         */
        function tooltipFormatter(node) {
            var html = "<span>";
            if (node.data.fullname) {
                html += "类别名称：" + node.data.fullname + "<br/>";
            }
            if (node.data.data && node.data.data.count) {
                html += "资产数量：" + node.data.data.count + " (" + (parseInt(node.data.data.count / sumCount * 10000) / 100) + "%)<br/>";
            }
            if (node.data.data && node.data.data.money) {
                html += "资产价值：" + node.data.data.money + " (" + (parseInt(node.data.data.money / sumMoney * 10000) / 100) + "%)";
            }
            html += "</span>";
            return html;
        }

        /**
         * 获取图表配置
         *
         * @param type
         */
        function getSeries(type) {
            var data = [];
            for (var i = 0; i < catTree.length; i++) {
                data.push(convert(catStat, catTree[i], "", type));
            }
            return {
                name: type == 'count' ? '按资产数量排序' : '按资产价值排序',
                type: 'treemap',
                tooltip: {
                    formatter: tooltipFormatter
                },
                label: {
                    normal: {
                        position: 'insideTopLeft',
                        formatter: function (params) {
                            console.log(params);
                            var arr = [
                                '{name|' + params.name + '}',
                                '{hr|}',
                                '{count|数量: ' + ((params.data.data && params.data.data.count) || 0) + '}',
                                '{money|价值: ' + echarts.format.addCommas(params.data.data && params.data.data.money) + '}'
                            ];
                            return arr.join('\n');
                        },
                        rich: {
                            money: {
                                lineHeight: 30,
                                color: 'yellow'
                            },
                            name: {
                                fontSize: 12,
                                color: '#fff'
                            },
                            hr: {
                                width: '100%',
                                borderColor: 'rgba(255,255,255,0.2)',
                                borderWidth: 0.5,
                                height: 0,
                                lineHeight: 10
                            }
                        }
                    }
                },
                data: data,
                leafDepth: 2,
                levels: [
                    {
                        itemStyle: {
                            normal: {
                                borderColor: '#555',
                                borderWidth: 4,
                                gapWidth: 4
                            }
                        }
                    },
                    {
                        colorSaturation: [0.3, 0.6],
                        itemStyle: {
                            normal: {
                                borderColorSaturation: 0.7,
                                gapWidth: 2,
                                borderWidth: 2
                            }
                        }
                    },
                    {
                        colorSaturation: [0.3, 0.5],
                        itemStyle: {
                            normal: {
                                borderColorSaturation: 0.6,
                                gapWidth: 1
                            }
                        }
                    },
                    {
                        colorSaturation: [0.3, 0.5]
                    }
                ]
            };
        }

        /**
         * 初始化图表
         */
        function initChart() {
            var elem = document.getElementById('assetsCatalogStatistics');
            if ($(elem).outerWidth() == 0) {
                setTimeout(function () {
                    initChart();
                }, 200);
                return;
            }

            console.log("initChart");
            var myChart = echarts.init(elem);
            myChart.setOption({
                legend: {
                    data: ['按资产数量排序', '按资产价值排序'],
                    selectedMode: 'single',
                    top: 0,
                    itemGap: 5,
                    backgroundColor: 'rgb(243,243,243)',
                    borderRadius: 5
                },
                tooltip: {},
                series: [
                    getSeries("count"),
                    getSeries("money")
                ]
            });
        }

        initChart();
    })(jQuery);
</script>